<template>
<div>
  <div class="docH" v-if="showType==='doc'" ref="previewContainer">

  </div>
  <el-image class="docH" v-else-if="showType==='img'" lazy :src="previewInfo.path || previewInfo.url">

  </el-image>
  <div v-else class="docH" v-html="text" style="text-align: left;width: 100%;overflow: auto">
  </div>
  <el-divider></el-divider>
    <el-button type="primary" style="margin-left:80%" @click="download()">下载文件</el-button>
  
</div>
  
</template>

<script>
import oss from '@/assets/aliyun/OssPreview.min';
import Api from "@/support/Api";

export default {
  name: "DocumentPreview",
  props: {
    previewInfo: Object
  },
  data() {
    return {
      supportViewFileTypes:[
        'xlsx','docx','doc','pdf'
      ],
      txtViewTypes:[
        'txt'
      ],
      imageViewTypes:[
        'jpg','png'
      ],
      showType:'txt',
      text:''
    }
  },
  mounted() {
    this.loadData();
    this.setShowType(this.previewInfo);
  },
  watch:{
    previewInfo:{
      handler(n,o){
        this.loadData();
        this.setShowType(n);
      },
      deep:true
    }
  },
  methods: {
    download() {
      if(this.showType=='txt'){
        window.download(this.textData,this.previewInfo.name,'text/plain');
        return;
      }
      location.href = this.previewInfo.path || this.previewInfo.url;
      // this.downloadFile(row.path,row.path);
    },
    setShowType(nv){
      let nowUrl = nv.path || nv.url;
        let self=this;
        for(let z in this.supportViewFileTypes){
          if(nowUrl.indexOf(this.supportViewFileTypes[z])>-1){
            this.showType='doc';
            return;
          }
        }
        for(let z in this.txtViewTypes){
          if(nowUrl.indexOf(this.txtViewTypes[z])>-1){
            this.showType='txt';
            Api.nativeGet(nowUrl,data=>{
              self.textData=data;
              self.text=data.replaceAll('\n','<br/>');
            });
            return;
          }
        }
        for(let z in this.imageViewTypes){
          if(nowUrl.indexOf(this.imageViewTypes[z])>-1){
            this.showType='img';
          }
        }
    },
    loadData() {
      for(let z in this.supportViewFileTypes){
        let url = this.previewInfo.path || this.previewInfo.url
        if(url.indexOf(this.supportViewFileTypes[z])>-1){
          let self=this;
          this.$get('oss/getPreviewToken?path=' + url).then(
            data => {
              if (data.data) {
                self.loadDocs(data.data.url, data.data.accessToken);
              }
            }
          );
          return;
        }
      }
    },
    loadDocs(url, token) {
      let self = this;
      if (!url || !token) {
        return;
      }
      aliyun.config({
        commandBars: [
          {
            cmbId: "组件ID",
            attributes: {
              visible: true, //隐藏组件。
              enable: false, //禁用组件，组件显示但不响应点击事件。
            }
          }
        ],
        // mount: document.querySelector('#container'),
        mount: self.$refs.previewContainer,
        url: url // 设置文档预览url地址
      }).setToken({token: token});
    }
  }
}
</script>

<style  scoped>
.docH{
  height: calc(100% - 6rem);
}
</style>
